Integrating JFreeChart to ZK Framework, Part I
Henri Chen, Principal Engineer, Potix Corporation
June 21, 2006
ZK has been asked for charting components for a while. To response these requirements, here is a quick start to fulfill it. This smalltalk uses the famous open source JFreeChart charting engine as an example. However, the way illustrated here is not limited to any specific charting engine. Developers can freely select their favorite charting engine to do the same thing.
Getting start
Go to JFreeChart download page. Download the latest version and unzip it to a directory. In the $JFREECHART$/lib subdirectory, find jcommon*.jar and jfreechart*.jar. Copy them to shared/lib of your Tomcat (The same place with other ZK jars). Or you can copy those two files to your project's WEB-INF/lib along with other ZK jar files.
The <image> component
In ZK's component set, there is a component named "image" that can be used to, as its name suggests, show images of different formats. It can be used to show images of at least gif, png, and jpeg formats. The whole charting implementation is then really straightforward. Use the charting engine to render data into image stream of compatible format and show it with the ZK's <image> component.
The example with less than 15 lines of code
Since JFreeChart support a lot of different charts. I will use the PieChart3D as an example to illustrate the procedure on how to integrate charting capability into ZK. First of all, chart is used to illustrate data as a graph. You got to have data first. In JFreeChart, data is put in a class named Dataset. To simplify the example, I hard coded this part.
DefaultPieDataset pieDataset = new DefaultPieDataset();
pieDataset.setValue("C/C++", new Double(17.5));
pieDataset.setValue("PHP", new Double(32.5));
pieDataset.setValue("Java", new Double(43.2));
pieDataset.setValue("Visual Basic", new Double(10));
JFreeChart provides an easy to use utility class, ChartFactory, that can be used to create a chart in one single API. Then you really draw the chart onto an BufferedImage. Another utility class, EncodeUtil, can be used to export the chart on the BufferImage into a png image stream byte array.
JFreeChart chart = ChartFactory.createPieChart3D("Sample Pie Chart 3D", pieDataset,true,true,true);
PiePlot3D plot = (PiePlot3D) chart.getPlot();
plot.setForegroundAlpha(0.5f);
BufferedImage bi = chart.createBufferedImage(500, 300, BufferedImage.TRANSLUCENT , null);
byte[] bytes = EncoderUtil.encode(bi, ImageFormat.PNG, true);
Ok, we have the png image stream of the chart in a byte array now. It is time for ZK's <image> component. To call the setContent() method of the Image component we have to first wrap the byte array as an AImage class and then call myimage.setContent(aimage) to really show the image on the browser. There you go.
AImage image = new AImage("Pie Chart", bytes);
myimage.setContent(image);
Summary
The whole procedure is simple:
- Prepare the dataset.
- Use chart engine to create the chart per the prepared dataset.
- Draw the chart on a BufferedImage.
- Use encode engine to encode the BufferImage into image stream byte array (png format in our example).
- Wrap the stream as an AImage and setContent() of the ZK's <image> component.
The whole example source code can be copied to the demo Source pane and press "try me" button to view the result. Remember to copy those two JFreeChart jars into the Tomcat's shared/lib directory first and reboot Tomcat.
The example illustrated here just do the "view" parts of the chart. Generally, it is even better if end user can drill down more detailed information by clicking on a specific part of the chart. ZK and JFreeChart can cooperate to provides that facility. I will show how to do that in the next smalltalk. The final target of ZK team is to provide a set of charting components that developer can use seamlessly just like using other ZK components.
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |